<html  xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>dati</title>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>


</head>
<body>
<style>
    .container{
        max-width: 800px;
        /*background: #d2edf4;*/
        min-height: 100%;
        /* background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);*/
    }
    .container{
        background-color: transparent;
    }
</style>

<script src="/js/common.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<div class="container" id="app" >


    <div class="post">
        <table class="table table-hover">
            <tr>
                <td>名称</td>
                <td>图片</td>
                <td>规格</td>
                <td>单价</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item, i) in items">
                <td>{{item.freshName}}</td>
                <td><img v-bind:src="item.url" style="width: 64px;height: 96px"></td>
                <td>{{item.freshSize}}</td>
                <td>{{item.freshPrice}}</td>
                <td>{{item.num}}</td>
                <td>
                    <button type="button" class="btn btn-danger"  v-on:click="deleteCar(item.carID)">删除</button>
                    <button type="button" class="btn btn-success"  v-on:click="plus(item.carID)">+1</button>
                </td>
            </tr>
        </table>
        <h3>总价钱：{{count}}</h3>
        <div v-if="carCode==1">
        <div class="form-group">
            <label >收件人：</label>
            <input class="form-control" name="passWord" id="receiver" v-model="receiver" type="text" required placeholder="收件人"/>
        </div>
        <div class="form-group">
            <label >手机号码：</label>
            <input class="form-control" name="passWord" id="phone" v-model="phone" type="text" required placeholder="手机号码"/>
        </div>
        <div class="form-group">
            <label >收货地址：</label>
            <input class="form-control" name="passWord" id="address" v-model="address" type="text" required placeholder="收货地址"/>
        </div>
        <div class="form-group"> <button  class="btn btn-primary  btn-block" v-on:click="buy()" >结算</button></div>
        </div>
    </div>

    <!--  </div>-->
</div>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            count:0,
            carCode:0,
            receiver:'',
            phone:'',
            address:'',
            items: [
            ]
        },
        methods: {
            buy:function () {
                if (app.receiver=="") {
                    alert("收件人不能为空");
                    return false;
                }
                if (!app.phone.match('^1(3|4|5|7|8)\\d{9}$')) {
                    alert("手机号码格式不正确");
                    return false;
                }
                if (app.address=="") {
                    alert("收货地址不能为空");
                    return false;
                }
                $.ajax({
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    type : "post",
                    url : "/user/buy",
                    data : JSON.stringify({
                        carList:app.items,
                        receiver:app.receiver,
                        phone:app.phone,
                        address:app.address
                    }),
                    success : function(data) {
                        if(data.code==200){
                            alert("结算成功");
                            window.parent.toBill();
                        }
                        else if(data.code==404){
                            alert("未登录");
                            location.href="/";
                        }
                        else {
                            alert("连接错误");
                        }

                    }
                });
            },
            deleteCar:function (carID) {
                var params={
                    carID:carID
                };
                $.ajax({
                    type : "post",
                    url : "/user/deleteCar",
                    data : params,
                    success : function(data) {
                        if(data.code==200){
                            alert("删除成功");
                            created();
                        }
                        else if(data.code==404){
                            alert("未登录");
                            location.href="/";
                        }
                        else {
                            alert("连接错误");
                        }
                    }
                });
            },
            plus:function (carID) {
                var params={
                    carID:carID
                };
                $.ajax({
                    type : "post",
                    url : "/user/plus",
                    data : params,
                    success : function(data) {
                        if(data.code==200){
                            alert("操作成功");
                            created();
                        }
                        else if(data.code==404){
                            alert("未登录");
                            location.href="/";
                        }
                        else {
                            alert("连接错误");
                        }
                    }
                });
            },
        },
    });
    created();
    function created() {
        var params1=[]
        $.ajax({
            type : "post",
            url : "/user/showCarList",
            data : params1,
            success : function(data) {
                app.items=data.carList;
                app.count=data.count;
                app.carCode=data.carCode;
                if(data.code==404){
                    alert("未登录");
                    location.href="/";
                }
            }
        });
    }

</script>
</body>
</html>
